import React, { Component } from 'react'
import '../App.css'
import { Tabs, Input, Button, Toast } from 'react-vant';
import Mytap from './conponents/Mytap';
import Ctx from './store/Ctx';
//添加账目页面
export default class Add extends Component {

  static contextType = Ctx

  state = {
    type: 0,//0=支出 1=状态
    total: '',//输入的金额
    bz: '',//备注
    srlist: ['工资', '兼职', '投资', '收红包', '其他'],//收入的类型
    srIndex: 0,//收入的索引

    zclist: ['吃喝', '玩乐', '话费', '交通', '其他'],//支出的类型
    zcIndex: 0,//支出的索引

    zhlist: ['支付宝', '微信', '钱包'],
    zhIndex: 0
  }

  //切换收入的索引
  changeSrIndex = (index) => {
    this.setState({ srIndex: index })
  }
  //切换支出的索引
  changezcIndex = (index) => {
    this.setState({ zcIndex: index })
  }
  //切换支付的索引
  changezhIndex = (index) => {
    this.setState({ zhIndex: index })
  }
  render() {

    let { type, total, bz, srlist, srIndex, zclist, zcIndex,zhlist,zhIndex } = this.state
    /* console.log(srlist[srIndex]); */
    let { addlist } = this.context

    return (
      <div className='addbox'>

        <p className='addtit'>账目类型</p>
        <Tabs type='card' onChange={(index) => {
          this.setState({ type: index })
        }}>
          {['支出', '收入'].map(item => {
            return <Tabs.TabPane key={item} title={item} />
          })}
        </Tabs>

        <p className='addtit'>输入金额</p>
        <div className='addInput'>
          <Input
            value={total}
            onChange={text => this.setState({ total: text })}
            placeholder='请输入金额'
            clearable
          />
        </div>

        <p className='addtit'>选择分类</p>
        { //根据taps切换索引 判断
          type ? <Mytap data={srlist}
            dataIndex={srIndex}
            setIndex={this.changeSrIndex}
          ></Mytap> : <Mytap data={zclist}
            dataIndex={zcIndex}
            setIndex={this.changezcIndex}></Mytap>
        }

        <p className='addtit'>选择账户</p>
        <Mytap data={zhlist}
          dataIndex={zhIndex}
          setIndex={this.changezhIndex}
        ></Mytap>


        <p className='addtit'>输入备注信息</p>
        <div className='addInput'>
          <Input.TextArea placeholder="请输入备注信息" value={bz} onChange={(v) => {
            this.setState({ bz: v })
          }} />
        </div>

        <div style={{ margin: '20px 0px' }}>
          <Button type='primary' block onClick={() => {
            //输入的金额不能为空 轻提示
            if (!total) {
              Toast.fail('金额不能为空')
              return
            }
            //输入的备注不能为空
            if (!bz) {
              Toast.fail('备注不能为空')
              return
            }
            //组合数据
            //type=1 收入数据 type=0 支出数据
            let title = type == 1 ? srlist[srIndex] : zclist[zcIndex]
            /*  console.log(title); */

            let obj = {
              id: new Date().getTime(),
              title,
              total,//金额
              type, //收入支出类型
              sed: false,
              bz,//备注
            }
            //执行添加的方法
            addlist(obj)
            //返回到首页
            this.props.history.push('/home')

          }}>完成</Button>
        </div>

      </div>
    )
  }
}
